<template>
    <div>
        <NavView></NavView>
        <div id="ContentBox" ref="ContentBox">
            <div class="CodeView markdown-body" v-html="content"></div>
        </div>
    </div>
</template>

<script>

import '../../assets/github-markdown.min.css'
import 'prismjs/themes/prism-tomorrow.css'
import NavView from '../../components/UI/Nav.vue'
import { marked } from 'marked';
import Prism from 'prismjs'
// import MDS from '../../Codes/md/index.js'

var langTypes = {
    js: 'javascript',
    css: 'css',
    html: 'html'
}

langTypes[undefined] = 'javascript';

marked.setOptions({
    highlight: function (code, lang, callback) {
        if (lang) {
            var html = Prism.highlight(code, Prism.languages[langTypes[lang]], lang);
            callback('', html);
        } else {
            callback('', html);
        }
    }
});

export default {
    props: ['id'],
    components: {
        NavView,
    },
    data() {
        return {
            content: '',
        }
    },
    watch: {
        id: {
            handler(value) {
                var markdownString = this.readFile('./Codes/md/' + value + '.md');
                // MDS[value];
                marked.parse(markdownString, (err, html) => {
                    this.content = html;
                });
            },
            immediate: true,
        }
    },
    methods: {
        readFile(url) {
            let xhr = new XMLHttpRequest();
            xhr.open('GET', url, false);
            xhr.overrideMimeType("text/html;charset-utf8");
            xhr.send(null);
            return xhr.status === 200 ? xhr.responseText : null;
        },
    }
}
</script>

<style>
</style>